<script setup>
import { RouterLink, RouterView } from "vue-router";
import { watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

console.log(route, "r", router, router.currentRoute.value.path, "router");

watch(
  () => route.fullPath, // 监听$route对象
  (to, from) => {
    // 在这里处理路由变化的逻辑
    console.log("路由发生变化", to, from, route.meta.title);
    document.title = route.meta.title || "可视化大屏";
  }
);
</script>

<template>
  <RouterView />
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}
.el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: 32px;
  color: rgba(7, 40, 185, 1);
}
.el-checkbox.el-checkbox--large .el-checkbox__inner {
  width: 28px;
  height: 28px;
}
.el-checkbox__label {
  display: inline-block;
  padding-left: 16px;
  line-height: 1;
  font-size: var(--el-checkbox-font-size);
}
.el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid transparent;
  border-left: 0;
  border-top: 0;
  height: 14px;
  left: 8px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 8px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}
</style>
